<template>
  <div>
    <window
      :show="windowConfig.show"
      :buttons="windowConfig.buttons"
      :showCancer="windowConfig.showCancer"
      @close="closeWindow"
    >
      <div class="custom-title">{{ blog.title }}</div>
      <div class="custom-content" v-html="blog.content"></div>
    </window>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getCurrentInstance,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
} from "vue";
import hljs from "highlight.js";
import "highlight.js/styles/github.css";
// import 'highlight.js/styles/default.css'
const api = {
  getBlogDetail: "/blog/getBlogById",
};
const { proxy } = getCurrentInstance();
const blog = ref({});

const init = (data) => {
  windowConfig.show = true;
  // console.log(data);
  nextTick(() => {
    showBlogDetail(data.blogId);
    let blocks = document.querySelectorAll("pre code");
    blocks.forEach((block) => {
      hljs.highlightBlock(block);
    });
  });
};

defineExpose({ init });

// onMounted(() => {
//   const blocks = document.querySelectorAll('pre code');
//   blocks.forEach((block) => {
//     hljs.highlightBlock(block);
//   });
// });

const windowConfig = reactive({
  show: false,
  title: "标题",
  showCancer: false,
  buttons: [
    {
      type: "danger",
      text: "确定",
      click: (e) => {
        closeWindow();
      },
    },
  ],
});

const showBlogDetail = async (blogId) => {
  let result = await proxy.Request({
    url: api.getBlogDetail,
    params: {
      blogId: blogId,
    },
  });
  if (!result) {
    return;
  }
  blog.value = result.data;
};

const emit = defineEmits();
const closeWindow = () => {
  windowConfig.show = false;
  emit("callback");
};
</script>

<style lang="scss" scoped>
/* 基本标题样式 */
.custom-title {
  font-family: "Arial", sans-serif; /* 设置字体 */
  font-size: 2.5em; /* 设置字体大小 */
  color: #333; /* 设置字体颜色 */
  text-align: center; /* 文本居中 */
  margin: 7px auto; /* 上下外边距 */
  padding: 10px 20px; /* 内边距 */
  border-bottom: 2px solid #666; /* 底部边框 */
  text-transform: uppercase; /* 文本大写 */
  letter-spacing: 2px; /* 字母间距 */
  max-width: 800px; /* 最大宽度 */
  font-weight: bold; /* 加粗 */
  //   background-color: #f0f0f0; /* 背景颜色 */
  //   border-radius: 8px; /* 圆角边框 */
  //   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 悬停效果 */
.custom-title:hover {
  color: #007bff; /* 悬停时改变颜色 */
  border-bottom-color: #007bff; /* 悬停时改变边框颜色 */
  //   background-color: #e0e0e0; /* 悬停时改变背景颜色 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

.custom-content {
  font-family: "Georgia", serif; /* 设置字体 */
  font-size: 1em; /* 设置字体大小 */
  color: #444; /* 设置字体颜色 */
  line-height: 1.6; /* 设置行高 */
  margin: 20px auto; /* 上下外边距，水平居中 */
  padding: 20px; /* 内边距 */
  min-height: calc(100vh - 300px);
  //   max-width: 800px; /* 最大宽度 */
  background-color: #fff; /* 背景颜色 */
  //   border: 1px solid #ddd; /* 边框 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  :deep(pre) {
    background-color: #f8f8f8; /* 背景颜色 */
    border-radius: 8px; /* 圆角边框 */
    padding: 16px; /* 内边距 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  }

  :deep(code) {
    font-family: "Courier New", Courier, monospace; /* 代码字体 */
  }
}

/* 段落样式 */
.custom-content p {
  margin-bottom: 15px; /* 段落下边距 */
  text-indent: 2em; /* 首行缩进 */
}

/* 链接样式 */
.custom-content a {
  color: #007bff; /* 链接颜色 */
  text-decoration: none; /* 去掉下划线 */
}

.custom-content a:hover {
  text-decoration: underline; /* 悬停时下划线 */
}

/* 列表样式 */
.custom-content ul,
.custom-content ol {
  margin-left: 30px; /* 列表左边距 */
  margin-bottom: 15px; /* 列表下边距 */
}

/* 标题样式 */
.custom-content h1,
.custom-content h2,
.custom-content h3,
.custom-content h4,
.custom-content h5,
.custom-content h6 {
  color: #333; /* 标题颜色 */
  margin-top: 20px; /* 标题上边距 */
  margin-bottom: 10px; /* 标题下边距 */
}

/* 图片样式 */
.custom-content :deep(img) {
  max-width: 90%; /* 图片最大宽度 */

}
</style>
